<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-3.5.1.min.js"></script>
    <title>Document</title>
    <style>
        .timePanel {
            top: 20px;
            left: 2%;
            width: 150px;
            height: 25px;
            border: 5px solid saddlebrown;
            border-radius: 30px;
            background: #fca44c;
            /*box-shadow:0 0 12px 10px gray inset;*/
            text-align: center;
        }

        .moneyPanel {
            margin-top: 10px;
            top: 20px;
            width: 200px;
            height: 25px;
            border: 5px solid saddlebrown;
            border-radius: 30px;
            background: #fca44c;
            /*box-shadow:0 0 12px 10px gray inset;*/
            text-align: center;
        }

        .cookerPanel {
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            top: 100px;
            width: 700px;
            height: 180px;
            border: 10px solid white;
            background: #fad24b;
            border-radius: 30px;
        }

        .customePanel {
            top: 450px;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
            width: 700px;
            height: 400px;
            border: 10px solid white;
            background: #fca44c;
            border-radius: 30px;
        }

        .defaultGameObjectClass {
            width: 150px;
            height: 100px;
            outline: solid 2px black;
            position: absolute;
            display: none;
        }

        .cookerI {
            width: 100px;
            height: 100px;
            background-image: url('img/chef.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

        .bossI {
            width: 100px;
            height: 100px;
            background-image: url('img/boss.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

        .World {
            background: url("./img/background.jpg") no-repeat;
            background-size: cover;
            background-repeat: repeat;
        }

        .hidden {
            display: none;
        }

        .lfloat {
            float: left;
        }

        .cookerHandle {
            float: left;
            height: 100px;
            width: 100px;
            margin-top: 30px;
            margin-left: 40px;
            margin-right: 20px;
            border-radius: 55px;
            border: 5px solid white;
            background: #eeeeee;
        }

        .customerHandle {
            float: left;
            height: 100px;
            width: 100px;
            margin: 30px 150px 30px 55px;
            border-radius: 55px;
            border: 5px solid white;
            background: #eeeeee;
        }

        .waitCustomerHandle {
            float: right;
            height: 100px;
            width: 100px;
            margin: 90px 10px 0px -80px;
            border-radius: 55px;
            border: 5px solid white;
            background: #eeeeee;
        }


        .blackGround {
            position: fixed;
            top: 0;
            left: 0;
            margin: 0;
            background: black;
            width: 100%;
            height: 100%;
            opacity: 0.5;
        }

        .addCookerCheckWindow {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -110px;
            margin-left: -210px;
            height: 200px;
            width: 400px;
            border: 10px solid white;
            background: #fad24b;
            border-radius: 30px;
        }

        .open {
            position: absolute;
            /* display: none; */
            top: 50%;
            left: 50%;
            margin-top: -260px;
            margin-left: -360px;
            height: 500px;
            width: 700px;
            border: 10px solid white;
            background: #fad24b;
            border-radius: 30px;
        }

        .openT1 {
            margin: 5% auto 5% 25%;
            font-weight: bold;
            font-size: 32px;
        }

        .openT2 {
            margin: 5% auto 5% 5%;
            font-size: 24px;
        }

        .openT3 {
            float: left;
            margin: 5% 9% 5% 9%;
            font-size: 24px;
        }

        .openB {
            width: 600px;
            float: left;
            height: 100px;
            margin-left: 6%;
            margin-right: 6%;
            margin-top: 8%;
            text-align: center;
            font-size: 24px;
            border: 5px solid #96750b;
            background: #fce49c;
            border-radius: 50px;
        }

        .NBtn {
            position: absolute;
            width: 100px;
            height: 50px;
            margin-left: 60px;
            margin-top: 130px;
            text-align: center;
            font-size: 24px;
            border: 5px solid #96750b;
            background: #fc9f9c;
            border-radius: 50px;
        }

        .YBtn {
            position: absolute;
            width: 100px;
            height: 50px;
            margin-left: 230px;
            margin-top: 130px;
            text-align: center;
            font-size: 24px;
            border: 5px solid #96750b;
            background: #fce49c;
            border-radius: 50px;
        }

        #waitCustomerPanel {
            margin-left: auto;
            margin-right: auto;
            top: 100px;
            width: 700px;
            height: 200px;
            border: 10px solid white;
            background: #ffc582;
            border-radius: 30px;
        }

        .waitCustomer {
            border-radius: 30px;
            position: absolute;
            height: 100px;
            width: 100px;
        }

        .waitCustomerTime {
            margin-top: 80px;
            background: deepskyblue;
            position: absolute;
            font-size: 18px;
            color: white;
            width: 100px;
            outline: 3px solid white;
            text-align: center;
            vertical-align: middle;
        }

        .customerEat {
            position: absolute;
            background: #d6c661;
            top: 0;
            left: 31.5%;
            margin: 50px auto;
            width: 700px;
            height: 800px;
            border: 5px solid white;
            border-radius: 30px;
        }

        .formCustomer {
            position: absolute;
            left: 0;
            top: -9%;
            float: left;
            height: 100px;
            width: 100px;
            margin-top: 30px;
            margin-left: 55px;
            margin-right: 55px;
            border-radius: 55px;
            border: 5px solid white;
            background: #eeeeee;
        }

        .customerI {
            width: 100px;
            height: 100px;
            background-image: url('img/customer1.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

        .customerDetail {
            font-weight: bold;
            font-size: 22px;
            margin: 30px 10px 10px 300px;
        }

        .foodHome {
            background: white;
            top: 0;
            margin: 20px auto;
            width: 600px;
            height: 550px;
            border: 10px solid brown;
            border-radius: 10px;
            color: #d6c661;
            font-size: 18px;
            font-weight: bold;
        }

        .inputFood {
            margin: 20px 50px;
        }

        .inputType {
            margin: 20px 30px;
        }

        .foodMoney {
            float: right;
        }

        input[type="radio"] {
            margin: 3px 3px 0px 5px;

        }

        .button1 {
            margin: 10px 50px;
            width: 350px;
            height: 100px;
            font-weight: bold;
            font-size: 32px;
            color: saddlebrown;
            border-radius: 50px;
            background: #d6c661;
            border: saddlebrown 10px solid;
        }

        .button2 {
            margin: 10px 0;
            width: 200px;
            height: 100px;
            font-weight: bold;
            font-size: 32px;
            color: saddlebrown;
            border-radius: 50px;
            background: #d6c661;
            border: saddlebrown 10px solid;
        }

        .cookerRemover {
            background-image: url("img/cookerRemover.png");
            width: 30px;
            height: 30px;
            background-size: cover;
            margin-left: 80px;
        }

        .cookerProgress {
            position: inherit;
            width: 100px;
            height: 24px;
            outline: 3px solid white;
            border: none;
            margin-top: 50px;
        }


        .cookerProgress::-webkit-progress-bar{
            background-color:rgb(0, 238, 119);
        }

        .cookerProgress::-webkit-progress-value{
            background-color: rgb(15, 207, 79);
        }

        .cookerProgressText {
            width: 100px;
            height: 24px;
            text-align: center;
            margin-top: -22px;
            color: snow;
        }

    </style>
</head>

<body objName="World" id="World" class="World">

<div objName="timePanel" class="timePanel">W1D1</div>
<div objName="moneyPanel" class="moneyPanel">1000</div>

<div objName="cookerPanel" id="cookerPanel" class="cookerPanel">

    <div objName="cookerHandle1" class="cookerHandle">
        <div objName="cooker" class="cookerI">
            <div objName="cookerRemover" class="cookerRemover"></div><progress objName="cookerProgress" class="cookerProgress"></progress><div objName="cookerProgressText" class="cookerProgressText">SHIT</div></div>
    </div>

    <div objName="cookerHandle2" class="cookerHandle">
        <div objName="cookerAdder" class="bossI"></div>
    </div>

    <div objName="cookerHandle3" class="cookerHandle">
    </div>

    <div objName="cookerHandle4" class="cookerHandle">
    </div>

    <div objName="cookerHandle5" style="margin-left: 100000px">
    </div>

</div>


<div objName="customePanel" id="customePanel" class="customePanel">

    <div class="customerHandle">

    </div>

    <div class="customerHandle">

    </div>

    <div class="customerHandle">

    </div>

    <div class="customerHandle">

    </div>

</div>

<div id="waitCustomerPanel">

    <div class="waitCustomerHandle">

        <div class="waitCustomer"></div>
        <div class="waitCustomerTime">等待中</div>

    </div>

    <div class="waitCustomerHandle">

        <div class="waitCustomer"></div>
        <div class="waitCustomerTime">等待中</div>

    </div>

    <div class="waitCustomerHandle">

        <div class="waitCustomer"></div>
        <div class="waitCustomerTime">等待中</div>

    </div>

</div>

<div objName="openPanel" id="openPanel" class="open">
    <div class="openT1">WebMOOC餐厅开业啦！</div>
    <div class="openT2">WebMOOC餐厅即将开业，请认真经营你的餐厅吧经营餐厅需要做好下面几件事情!加油！</div>
    <div class=openT3>招聘厨师</div>
    <div class=openT3>迎接客人</div>
    <div class=openT3>烹饪美食</div>
    <button objName="openEnterBtn" id="openEnterBtn" class="openB">开始经营吧</button>
</div>

<div objName="addCookerCheckWindow" id="addCookerCheckWindow" class="addCookerCheckWindow">
    <h1 style="position: absolute;">是否要添加厨师</h1>
    <div objName="NBtn" class="NBtn">取消</div>
    <div objName="YBtn" class="YBtn">确认</div>
</div>

<div objName="removeCookerCheckWindow" id="removeCookerCheckWindow" class="addCookerCheckWindow">
    <h1 style="position: absolute;">是否要移除厨师</h1>
    <div objName="NBtn" class="NBtn">取消</div>
    <div objName="YBtn" class="YBtn">确认</div>
</div>


<!--    点菜表单-->
<!--
<div class="blackGround">
</div>
 -->
<!--
<form id="form-foodList" class="customerEat">
    <div class="formCustomer">
        <div class="customerI"></div>
    </div>
    <div id="priceTotal" class="customerDetail">QIAN正在点菜，已点18元的菜</div>
    <div class="foodHome">
        <div class="inputType">凉菜（二选一，可不点）</div>
        <div class="inputFood"><input name="liangcai" value="SAN" type="radio"/>凉拌SA
            <div class="foodMoney">········································· ￥6</div>
        </div>
        <div class="inputFood"><input name="liangcai" value="DOM" type="radio"/>冷切DOM
            <div class="foodMoney">········································· ￥4</div>
        </div>
        <div class="inputType">主菜（五选一，必点）</div>
        <div class="inputFood"><input name="zhucai" value="ULLI" type="radio"/>UL炖LI
            <div class="foodMoney">········································ ￥12</div>
        </div>
        <div class="inputFood"><input name="zhucai" value="HEAD" type="radio"/>冷切DOM
            <div class="foodMoney">········································ ￥15</div>
        </div>
        <div class="inputFood"><input name="zhucai" value="ECharts" type="radio"/>凉拌SA
            <div class="foodMoney">········································ ￥18</div>
        </div>
        <div class="inputFood"><input name="zhucai" value="CSS" type="radio"/>冷切DOM
            <div class="foodMoney">········································ ￥16</div>
        </div>
        <div class="inputFood"><input name="zhucai" value="DIV" type="radio"/>凉拌SA
            <div class="foodMoney">········································ ￥12</div>
        </div>
        <div class="inputType">饮品（二选一，可不点）</div>
        <div class="inputFood"><input name="yinpin" value="flex" type="radio"/>冷切DOM
            <div class="foodMoney">········································· ￥5</div>
        </div>
        <div class="inputFood"><input name="yinpin" value="milk" type="radio"/>凉拌SA
            <div class="foodMoney">········································· ￥6</div>
        </div>
    </div>
    <input id="btn-foodList" type="button" value="点好了，快点上菜" class="button1">
    <button class="button2">不吃了</button>
</form>
 -->
<!--    提示有空位-->

<!--    <div objName="testGameObj1" id="testGameObj1" class="boss">-->

<!--        <div objName="testGameObj2" class="boss">-->

<!--            <div objName="testGameObj3" class="boss"></div>-->

<!--        </div>-->

</div>

<script>

    window.onload = () => {

        //祖宗物体
        const world = new GameObject($('body'));

        CookerActions();

    }

    function Awake() {

        StartCook();

        function StartCook() {
            DelayCallFunction(FinishCook, 500, () => console.log("cook"));
        }

        function FinishCook() {
            console.log("finish cook");
        }

    }


    //#region zzs

    function CookerActions() {

        const world = new GameObject($('body'));

        const htmlPrefabs = {
            cookerI: '<div objName="cookerRemover" class="cookerRemover"></div><progress objName="cookerProgress" class="cookerProgress"></progress><div objName="cookerProgressText" class="cookerProgressText">SHIT</div></div>'
        }

        //启动界面
        const openPanel = new GameObject($("#openPanel"), world);

        //启动界面确认按钮
        const openPanelEnterBtn = openPanel.GetChild("openEnterBtn");
        $(openPanelEnterBtn.elem).click(() => openPanel.SetActive(false));



        //厨师面板
        const cookerPanel = new GameObject($('#cookerPanel'), world);
        //添加厨师按钮
        //const cookerAdder = cookerPanel.GetChild("cookerHandle1").GetChild("cookerAdder");
        const cookerAdder = cookerPanel.GetChild("cookerHandle2").GetChild("cookerAdder");
        //添加厨师按钮事件
        cookerAdder.OnClick(() => {

            addCookerCheckWindow.SetActive(true);

        });


        //添加厨师二次确定面板
        const addCookerCheckWindow = new GameObject($('#addCookerCheckWindow'));
        //添加厨师二次确定面板确定事件
        addCookerCheckWindow.GetChild("YBtn").OnClick(() => {

            let oldHandleIndex = cookerAdder.parentObj.indexOfParent;

            if(oldHandleIndex + 1 < cookerAdder.parentObj.parentObj.childObjs.length) {

                if (cookerAdder.SetParent(cookerPanel.GetChildByIndex(oldHandleIndex + 1))) {

                    AddNewCookerToPanel(oldHandleIndex);

                }
            }

            addCookerCheckWindow.SetActive(false);

        });
        //添加厨师二次确定面板取消事件
        addCookerCheckWindow.GetChild("NBtn").OnClick(() => {

            addCookerCheckWindow.SetActive(false);

        });
        addCookerCheckWindow.SetActive(false);



        //移除厨师二次确定面板
        const removeCookerCheckWindow = new GameObject($('#removeCookerCheckWindow'));
        removeCookerCheckWindow.GetChild("NBtn").OnClick(() => {

            removeCookerCheckWindow.SetActive(false);

        });
        removeCookerCheckWindow.SetActive(false);

        function AddNewCookerToPanel(oldHandleIndex) {

            let newCookerObj = new GameObject($(htmlPrefabs.cookerI), cookerPanel.GetChildByIndex(oldHandleIndex));
            let newCookerRemover = newCookerObj.GetChild("cookerRemover");

            newCookerRemover.OnClick(() => {

                removeCookerCheckWindow.SetActive(true);

                ShowRemoveCookerCheckPanel(newCookerObj);

            });

        }
        function ShowRemoveCookerCheckPanel(cookerObj) {

            removeCookerCheckWindow.GetChild("YBtn").OnClick(() => {
                console.log("Remover更改绑定对象：" + cookerObj.objName);
                RemoveCookerFromPanel(cookerObj);
                removeCookerCheckWindow.SetActive(false);
            });

        }
        function RemoveCookerFromPanel(cookerObj) {

            let cookerHandle = cookerObj.parentObj;
            let cookerHandleIndex = cookerHandle.indexOfParent;
            let cookerPanel = cookerHandle.parentObj;
            let cookerHandleCount = cookerPanel.childObjs.length;

            console.log(cookerHandle.objName + "被解雇 ");

            cookerHandle.RemoveChild(cookerObj);
            $(cookerObj.elem).remove();

            for (let index = cookerHandleIndex + 1; index < cookerHandleCount; index++) {

                if(index < 1) {
                    break;
                }

                let lastCookerHandle = cookerPanel.childObjs[index - 1];
                let cookerHandle = cookerPanel.childObjs[index];

                let cooker = cookerHandle.GetChildByIndex(0);

                console.log(cookerHandle.objName + "向前移动到" + lastCookerHandle.objName);

                cooker.parentObj = lastCookerHandle;

                if(cooker.objName == "cookerAdder") {
                    break;
                }

            }

            console.log("移动结束");

        }

        let testFood = {
            name: "NEWSHIT",
            cookDuration: 20,
        }

        StartCooker(0, shiftFood("SAN"), TestFinishCallback);

        function StartCooker(cookerIndex, food, finishCallBack) {

            let tarCookerHanle = cookerPanel.GetChildByIndex(cookerIndex);
            let tarCooker = tarCookerHanle.GetChild("cooker");
            let cookerProgress = tarCooker.GetChild("cookerProgress");
            let cookerProgressText = tarCooker.GetChild("cookerProgressText");
            let cookerCount = 0;

            $(cookerProgress.elem).attr('max', food.cookTime);
            $(cookerProgressText.elem).text(food.allName);

            console.log(tarCookerHanle.objName + "号厨师开始烹饪：" + food.allName);

            DelayCallFunction(() => finishCallBack(tarCookerHanle, food), food.cookTime, () => {
                $(cookerProgress.elem).attr('value', ++cookerCount);
            })

        }



    }

    //#endregion
    //#region
    class CTM {

        foodList = [];

        AddFoodToFoodList (){

        }

    }

    let newCTM = new CTM();



    let ctm = {
        foodList: [],
        //顾客获取菜单的菜
        AddFoodToFoodList: function AddFoodToFoodList (){

        }
    }

    let workCtms = [];
    let freeCtms = [];
    //顾客从餐厅外进入餐厅
    function AddCtmToWorkFromFree () {
        if(workCtms.length()<=4)
        {
            workCtms.push(freeCtms.shift())
            return ture;
        }
        else
            return false;
    }

    //#endrgion

    //#region ////////// Function ////////////////////////////////

    async function DelayCallFunction(callback, ms, frameCall = () => { }) {

        for (let index = 0; index < ms; index++) {
            frameCall(index);
            await Delay(100);
        }

        callback();

    }
    async function Delay(ms) {
        await sleep(ms);
    }
    function sleep(ms) {
        return new Promise(function (resolve, reject) {
            setTimeout(resolve, ms);
        })
    }
    function Callbacktest() {
        console.log("CallBack");
    }
    //#endregion


    //#yjj
    function em() {
        console.log(cookerEmployed);
    }
    var money=0;        //现有的金钱
    const nowFoodList = [

    ];
    const cookerUNEmployed = [
        {
            id: 1,
            cookFood: "",       //填入正在做的菜品,空着为无
        },
        {
            id: 2,
            cookFood: "",       //填入正在做的菜品,空着为无
        },
        {
            id: 3,
            cookFood: "",       //填入正在做的菜品,空着为无
        },
        {
            id: 4,
            cookFood: "",       //填入正在做的菜品,空着为无
        },
        {
            id: 5,
            cookFood: "",       //填入正在做的菜品,空着为无
        },
        {
            id: 6,
            cookFood: "",       //填入正在做的菜品,空着为无
        }
    ];
    const cookerEmployed = [

    ];
    const cookerWorking = [

    ];

    const cookerAll = [

    ];
    //雇佣一个厨师
    function employe() {
        cookerEmployed.push(cookerUNEmployed.shift());
    }
    //解雇一个厨师
    function dismiss(id) {
        cookerUNEmployed.push(cookerEmployed[id]);
        cookerEmployed.splice(id,1);
    }


    //从点菜集合中拿菜
    function shiftFood(foodName) {
        let i;
        for(i=0;i<foodList.length;i++){
            if (foodList[i].name == foodName) {
                return foodList[i];
            }
        }
    }
    //做菜
    function startCooke() {
        let food = shiftFood();
        money-=food.needMoney;      //金币减少
        cookerWorking.push(cookerEmployed.shift());
        DelayCallFunction(finishCooke(),food.cookTime)
    }

    //做完菜
    function TestFinishCallback(cooker, food) {
        console.log(cooker.objName + "号厨师烹饪好了："  + food.allName);
        for (let i=0;i<workCtms.length;i++){
            for (let j=0;j<workCtms[i].foodList.length;j++){
                if (workCtms[i].foodList[j]==food){
                    console.log(cooker.objName + "号厨师上菜成功："  + food.allName);
                    break;
                }
            }
        }
        console.log(cooker.objName + "号厨师上菜失败："  + food.allName);
    }
    //找厨师做菜
    function findCookerIndex() {
        cookerWorking.push(cookerEmployed.shift());
    }


    let foodList = [
        {
            name: "SAN",
            allName: "凉拌SA",
            needMoney: 3,
            cookTime: 30,
            sellMoney: 6,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
    }
        },
        {
            name: "DOM",
            allName: "冷切DOM",
            needMoney: 2,
            cookTime: 20,
            sellMoney: 4,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "ULLI",
            allName: "UL炖LI",
            needMoney: 6,
            cookTime: 32,
            sellMoney: 12,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "HEAD",
            allName: "红烧HEAD",
            needMoney: 7,
            cookTime: 40,
            sellMoney: 15,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "ECharts",
            allName: "酥炸ECharts",
            needMoney: 9,
            cookTime: 32,
            sellMoney: 18,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "CSS",
            allName: "炙烤CSS",
            needMoney: 8,
            cookTime: 38,
            sellMoney: 16,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "DIV",
            allName: "清蒸DIV",
            needMoney: 6,
            cookTime: 24,
            sellMoney: 12,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "flex",
            allName: "鲜榨flex",
            needMoney: 2,
            cookTime: 12,
            sellMoney: 5,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        {
            name: "milk",
            allName: "小程序奶茶",
            needMoney: 3,
            cookTime: 15,
            sellMoney: 6,
            dumpTime: 10,
            occupyCooker:function () {
                cookerNow.state=1;
            }
        },
        //做菜绑定厨师

        //雇佣厨师
    ];

    //#region

    //#region ////////// Class ////////////////////////////////

    class Vector2 {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }

        x; y;

        ToString() {
            return "(" + this.x + ", " + this.y + ")";
        }
    }

    class GameObject {
        constructor(elem, parentObj = null) {
            this.objName = $(elem).attr('objName') ? $(elem).attr('objName') : "unnameObj";
            this.elem = $(elem);
            this.position = new Vector2($(this.elem).css('left'), $(this.elem).css('top'));
            this.parentObj = parentObj;

            if (this.objName != "World") {
                this.InitChilds();
                this.SetActive(true);
            }

            let childsStr = "";
            let childCount = 0;
            this.childObjs.forEach(e => {
                childCount++;
                childsStr += "\n" + childCount.toString() + ". " + e.objName;
            });
            /*
                            console.log("==================\n== " + this.objName + "    创建成功! \n=================="
                                + "\n↓ ↓ ↓ 属性概览 ↓ ↓ ↓"
                                + "\nposition: " + this.position.ToString()
                                + "\nparentObjName: " + (this.objName == "World" ? "此元素为World" : this.parentObj == null ? "此元素是孤儿" : $(this.parentObj.elem).attr('id'))
                                + "\ncssClass: " + this.cssClass
                                + "\nchilds: " + childsStr + "\n "
                            );
                             */
        }



        get objName() {

            return this._objName;

        }
        set objName(value) {

            //操作$elem
            this._objName = value;
            //console.log(this.objName + "设置了objName: " + this._objName);

        }



        get position() {

            return this._position;

        }
        set position(value) {

            this._position = value;
            $(this.elem).css("left", this.position.x);
            $(this.elem).css("top", this.position.y);
            //console.log(this.objName + "设置了position: " + this.position.ToString());

        }



        get parentObj() {

            return this._parentObj;

        }
        set parentObj(newParentObj) {

            let oldParentObj = this.parentObj;

            if (newParentObj == oldParentObj || newParentObj == null) {
                return false;
            }

            if (newParentObj.objName != "World") {
                $(this.elem).appendTo($(newParentObj.elem));
            }

            if (oldParentObj != null) {
                oldParentObj.RemoveChild(this);
            }

            this._parentObj = newParentObj;

            newParentObj.AddChild(this);

            return true;

        }

        SetParent(newParentObj) {

            let oldParentObj = this.parentObj;

            if (newParentObj == oldParentObj || newParentObj == null) {
                return false;
            }

            if (newParentObj.objName != "World") {
                $(this.elem).appendTo($(newParentObj.elem));
            }

            if (oldParentObj != null) {
                oldParentObj.RemoveChild(this);
            }

            this._parentObj = newParentObj;

            newParentObj.AddChild(this);

            return true;

        }


        get elem() {

            return this._elem;

        }
        set elem(value) {

            if (value.offset() != null) {

                this._elem = value;

            } else {

                //this._elem = $('<div>').appendTo($(this.parentObj.elem)).attr('id', this.objName);

            }

            //console.log(this.objName + "设置了elem: " + "$('#" + $(this.elem).attr('id') + "')");

        }


        get cssClass() {

            return this.objName == "World" ? "此元素为World" : $(this.elem).attr('class');

        }
        set cssClass(value) {

            if (this.objName == "World") {

                //console.log(this.objName + "设置了cssClass: 此元素为World，不进行设置")

            } else {

                let elemHasClass = $(this.elem).attr("class");

                if (elemHasClass && value == "defaultGameObjectClass") {
                    //console.log(this.objName + "设置了cssClass: " + "已拥有class，不进行设置")
                    return;
                }

                $(this.elem).attr('class', value);

                //console.log(this.objName + "设置了cssClass: " + $(this.elem).attr('class'));

            }

        }


        get x() {
            return this.position.x;
        }
        set x(value) {
            this.position = new Vector2(value, this.position.y);
        }



        get y() {
            return this.position.y;
        }
        set y(value) {
            this.position = new Vector2(this.position.x, value);
        }

        get indexOfParent() {

            return this.parentObj.GetChildIndex(this);

        }


        childObjs = new Array();

        InitChilds() {

            let elemChilds = $(this.elem).children();

            for (let i = 0; i < elemChilds.length; i++) {
                let e = elemChilds.get(i);
                let childIsThis = $(e).attr('id') == this.objName;
                if (!childIsThis) {
                    let newObj = new GameObject($(e), this);
                    newObj.parentObj = this;
                }
            }

        }

        ClearChild() {
            this.childObjs = new Array();
        }

        AddChild(newChild) {

            this.childObjs.push(newChild);
            newChild.parentObj = this;

            //console.log(this.objName + "添加了Child: " + newChild.objName)

        }

        RemoveChild(childObj) {

            let tarChildIndex = this.childObjs.findIndex((e) => e == childObj);

            this.childObjs.splice(tarChildIndex - 1, 1);

        }

        GetChild(childName) {

            return this.childObjs.find((child) => child.objName == childName);

        }

        GetChildByIndex(index) {

            if (index < 0 || index > this.childObjs.length) {
                return null;
            }

            return this.childObjs[index];

        }

        GetChildIndex(childObj) {

            return this.childObjs.findIndex((e) => childObj == e);

        }

        SetActive(active) {
            $(this.elem).css('display', active ? 'block' : 'none')
        }

        SetImg(path) {
            $(this.elem).css('background-image', "url('" + path + "')");
        }

        OnClick(event) {
            $(this.elem).unbind().click(event);
        }

    }

    class Sprite extends GameObject {
        constructor(objName = "unnamedObj", position = new Vector2(0, 0), parentObj = null, cssClass = "defaultGameObjectClass") {
            super(objName, position, parentObj, cssClass);
        }
    }

    //#endregion


</script>

</body>

</html>